<template>
	<fu-popup v-model="show" mode="bottom" :safe-area-inset-bottom="true" :border-radius="24">
	  <view class="padding">
		<view class="flex justify-between padding-bottom">
		  <view class="flex-sub text-center">领券</view>
		  <view class="close-box" @tap="close">
			<text class="cuIcon-close"></text>
		  </view>
		</view>
		<scroll-view class="container" scroll-y>
			<text >
					可领取优惠券
			</text>
			  
			<block v-for="(item,index) in info" :key="index">
				<label >
					<view class="flex  margin-tb-sm height-150 wrap">
						<view class="flex-sub bg-white border radius list-item flex align-center ">
							<view class="left radius flex align-center justify-center">
								<text class="text-price">{{item.money}}元</text>
							</view>
							<view class="right flex-sub flex">
								<view class="flex-sub padding-left-sm flex flex-direction justify-around">
									<text class="text-sm text-333 text-cut">{{item.name}}</text>
									<text class="text-sm" v-if="item.type == 1">使用限制：无限制</text>
									<text class="text-cut text-333 text-sm" v-else>使用限制：满{{item.min_order_money}}元使用</text>
									<text class="text-cut text-sm text-999 margin-top-xs">有效期至：{{item.end_time}}</text>
								</view>
							</view>
							<view class="card-action">
								<text
									class="action-btn"
									:class="item.is_receive === 1  ? 'get-after' : 'get-before'"
									@tap.stop="receive(item,index,item.is_receive)"
								> 
									{{ item.is_receive === 1 ? '已领取' : '领取' }} 
								</text>
							</view>
								
						</view>
					</view>
				</label>
			</block>
		</scroll-view>
	  </view>
	</fu-popup>
  </template>
  
  <script>
	  export default {
	  props: {
		info: {
		  type: Array,
		  default(){
			return []
		  }
		},
	  },
		  data() {
			  return {
		  show: false,
		  curTab: 0,
			  };
		  },
	  watch: {
	  },
	  methods: {
		  //领取优惠券
		receive(item,index,is_receive){
			// 前端判断已领取得点击失效
			if(is_receive ==1){
				return false
			}
			console.log(11111)
			this.$api.post(global.apiUrls.postReceiveCoupon, {
				cid: item.id
				}).then(res => {
					console.log(res.data)
				uni.showToast({
					title: res.data.msg,
					icon: "none"
				})
				if (res.data.code == 1) {
					// this.info[index].is_receive = 1;
					this.$emit('changeInfo', index)
				}
			});
		},
		open(){
		  this.show = true;
		},
		close(){
		  this.show = false;
		},
	  },
	  }
  </script>
  
  <style lang="scss" scoped>
	.container{
	  height: 600rpx;
	}
	.text-999{
	  color: #999999;
	}
	.height-150{
		height: 150rpx;
	}
	.text-price{
		/* color: red; */
		line-height: 1;
		/* text-align: center; */
	}
	.card-action {
		justify-content: center;
		width: 180rpx;
      display: flex;
      align-items: center;
      /* flex: 1; */
      height: 100%;
      padding-left: 10rpx;
      padding-right: 10rpx;
      .action-btn {
		height: 60rpx;
        width: 140rpx;
        padding: 0;
        border-radius: 20rpx;
        font-size: 24rpx;
        text-align: center;
        line-height: 60rpx;
        color: #FFFFFF;
        background: #fd100b;
      }
    }
	.get-after {
  background: #949090 !important;
}
.get-before {
  background:linear-gradient(90deg,rgb(245, 69, 45) 0%,rgb(255, 3, 3) 100%);
}
.left{
	text-align: center;
	width: 140rpx;
	/* background: #FCCE31; */
	background: linear-gradient(90deg, #ff154f 0%, #f12228 100%);
	color: #fff;
	height: 100%;
	line-height: 1;
}
.right{
	width: 360rpx;
}
.border{
	border: 1rpx solid #FBEFC7;
	background: #FBEFC7;
	
}
  </style>
  